<template>
  <div>
    <el-dialog
      :title="title"
      :visible="showDialog"
      width="40%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="title==='添加车型'?rules:rules2"
        class="form"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
          label-width="100px"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入车辆类型"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
          label-width="100px"
        >
          <el-input
            v-model="form.allowableLoad"
            placeholder="请输入车辆载重"
          ><i slot="suffix">吨</i></el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
          label-width="100px"
        >
          <el-input
            v-model="form.allowableVolume"
            placeholder="请输入车辆体积"
          ><i slot="suffix">立方</i></el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
          label-width="100px"
        >
          <el-input v-model="form.measureLong"><i slot="suffix">米</i></el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
          label-width="100px"
        >
          <el-input v-model="form.measureWidth"><i slot="suffix">米</i></el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
          label-width="100px"
        >
          <el-input v-model="form.measureHigh"><i slot="suffix">米</i></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <template>
          <el-button
            type="warning"
            @click="add()"
          >确 认</el-button>
          <el-button
            plain
            @click="closeDialog"
          >取 消</el-button>
        </template>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addApi, editApi } from '@/api/transit'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        goodsTypes: [], // 货物类型列表
        id: +new Date(),
        measureHigh: '0.0', // 高
        measureLong: '0.0', // 长
        measureWidth: '0.0', // 宽
        name: '', // 车辆类型名称
        num: 'null' // 车型数量
      },
      //   添加
      rules: {
        name: [
          { required: true, message: '车型名称不能为空', triggle: ['blur', 'change'] }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', triggle: ['blur', 'change'] },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入', triggle: ['blur', 'change'] }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', triggle: ['blur', 'change'] },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入', triggle: ['blur', 'change'] }
        ]
      },
      rules2: {
        name: [
          { required: true, message: '车型名称不能为空', triggle: ['blur', 'change'] }
        ],
        allowableLoad: [
          { required: true, type: 'number', message: '应载重量不能为空', triggle: ['blur', 'change'] },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入', triggle: ['blur', 'change'] }
        ],
        allowableVolume: [
          { required: true, type: 'number', message: '应载体积不能为空', triggle: ['blur', 'change'] },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入', triggle: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:showDialog', false)
      this.$refs.form.resetFields()
      this.form = {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        goodsTypes: [], // 货物类型列表
        id: +new Date(),
        measureHigh: '0.0', // 高
        measureLong: '0.0', // 长
        measureWidth: '0.0', // 宽
        name: '', // 车辆类型名称
        num: 'null' // 车型数量
      }
    },
    add() {
      this.$refs.form.validate(async(flag) => {
        if (!flag) return
        if (this.title === '新增车型') {
          await addApi(this.form)
          //   console.log(res)
          this.$parent.render()
          this.$message.success('添加成功')
        } else {
          // 编辑车型
          const res = await editApi(this.form)
          console.log(res)
          this.$parent.render()
          this.$message.success('编辑成功')
        }
        this.closeDialog()
      })
    }
  }
}
</script>

<style scoped >
.form{
    text-align: center;
}
</style>
